:root {
  --other-msg-color: rgba(0, 0, 0, .05);
  --self-msg-color: #e7f8ff;
  --icon-hover-color: #00000008;
  --tags-back-hover: rgb(0, 0, 0, 0.12);
  --tags-back: rgb(0, 0, 0, 0.06);
  --white: white;
  --black: rgb(48, 48, 48);
  --gray: rgb(250, 250, 250);
  --primary: rgb(29, 147, 171);
  --second: rgb(231, 248, 255);
  --navbar-background: rgba(244, 244, 244);

  /* color */
  --color-card: rgba(0, 0, 0, 0.12);
  --color-tags-active-back: #222;
  --color-tags-active: #f8f8f8;
  --color-tags-color: #333333;
  --color-tags-back: rgba(0, 0, 0, 0.12);
  --color-robot-model: #fff;
  --color-body-bg: #ffffff;
  --color-text: #000;
  --color-text-tags: rgba(0, 0, 0, 0.03);
  --color-text-default: #442c2c;
  --color-primary-bg: #eaeffd;
  --color-navbar-bg: rgba(255, 255, 255, 0.86);
  --color-icon-hover: #409eff;
  --color-border-default: #d0d7de;
  --color-message-active: #a7bcd224;
  --color-time-divider: rgba(0, 0, 0, 0.45);
  --color-message-chat-name: rgba(0, 0, 0, 0.85);
  --color-draggable-body: #f5f5f5;
  --color-range: #fff;
  --color-multiple-choice: hsl(220deg 20% 91%);
  --color-mention-active: #f0f2f5;
}

[data-theme="dark"] {
  --other-msg-color: #000;
  --self-msg-color: #000;
  --icon-hover-color: #ffffff0f;
  --tags-back-hover: rgba(255, 255, 255, 0.16);
  --tags-back: rgba(255, 255, 255, 0.10);
  --white: rgb(30, 30, 30);
  --black: rgb(187, 187, 187);
  --gray: rgb(21, 21, 21);
  --primary: rgb(29, 147, 171);
  --second: rgb(27 38 42);
  --navbar-background: #1f1f1f;

  /* color */
  --color-card: rgba(255, 255, 255, 0.10);
  --color-tags-active: #000000;
  --color-tags-active-back: #eeeeee;
  --color-tags-color: #ffffff;
  --color-tags-back: rgb(34, 34, 34);
  --color-robot-model: #333;
  --color-body-bg: #222222;
  --color-text: #fff;
  --color-text-tags: #111111;
  --color-text-default: #fff;
  --color-primary-bg: #bbcdff;
  --color-navbar-bg: rgba(34, 34, 34, 0.86);
  --color-message-active: rgba(255, 255, 255, 0.10);
  --color-border-default: #30363d;
  --color-time-divider: #fff;
  --color-message-chat-name: #fff;
  --color-draggable-body: rgba(0, 0, 0, 0.85);
  --color-range: #141414;
  --color-multiple-choice: #333;
  --color-mention-active: #333;
}